<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>姓名案例计算属性实现</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<div id="root">
		姓: <input type="text"  v-model="firstName" /><br>
		名: <input type="text" v-model="lastName" /><br>
		全名: <span>{{fullName}}</span>
	</div>
	<body>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el:"#root",
				data:{
					firstName:"张",
					lastName:"三"
				},
				// 计算属性使用关键字 computed进行定义
				computed:{
					// 设置一个对象，对象的返回值就是计算属性的结果，最终 fullName会被放到vm实例中
					fullName:{
						// get的作用？ 当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
						// get 什么时候调用 ？ 初次调用fullName时。2、所依赖的数据发生变化时
						get(){
							return this.firstName + " -- " + this.lastName
						},
						// set 什么时候会被调用？
						set(value){
							const arr = value.splice("-");
							this.firstName = arr[0];
							this.lastName = arr[1];
						}
					}
				}
			})
		</script>
	</body>
</html>
